<template>
  <div class="main-page">
    <!-- 可爱装饰元素 -->
    <div class="kawaii-page-decorations">
      <div class="floating-icon icon-1">
        <img src="@/assets/icons/bilibili.svg" alt="漂浮图标" />
      </div>
      <div class="floating-icon icon-2">
        <img src="@/assets/icons/bilibili.svg" alt="漂浮图标" />
      </div>
      <div class="floating-icon icon-3">
        <div class="kawaii-face"></div>
      </div>
    </div>

    <!--   分区导航-->
    <div class="main-page-channel-container">
      <div class="left-channel">
        <div class="left-channel-recommend">
          <img src="@/assets/bilibiliavatar.png" alt="" />
          <span>热门</span>
        </div>
      </div>
      <div class="right-channel">
        <div class="right-channel-left">
          <div
            class="channel-container"
            v-for="(channel, index) in rightChannels"
            :key="index"
          >
            <el-popover
              :width="187"
              trigger="hover"
              :show-arrow="false"
              :offset="5"
            >
              <template #reference>
                <div
                  class="right-channel-left-link"
                  @click="jumpToParentChannel(channel)"
                >
                  {{ channel.name }}
                </div>
              </template>
              <div class="sub-channel-container">
                <a
                  class="sub-channel-left-link"
                  v-for="(subChannel, idx) in channel.subChannels"
                  :key="idx"
                  :href="`/category/${subChannel.id}`"
                  target="_blank"
                >
                  {{ subChannel.name }}
                </a>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>

    <div class="main-page-video-container">
      <!-- 动漫主题标语 -->
      <div class="anime-slogan">
        <div class="slogan-decoration left"></div>
        <h2>二次元精选</h2>
        <div class="slogan-decoration right"></div>
      </div>

      <!-- 推荐区域 -->
      <div class="recommend-section">
        <div class="recommend-content">
          <!-- 左侧轮播图 -->
          <div class="recommend-left">
            <el-carousel
              :interval="5000"
              arrow="never"
              class="carousel"
              trigger="click"
              indicator-position="none"
              @change="carouselChange"
              ref="elCarouselRef"
              height="100%"
            >
              <el-carousel-item
                v-for="(video, index) in recommendedVideos"
                :key="index"
              >
                <img
                  :src="video.thumbnail"
                  class="carousel-img"
                  :alt="video.title"
                  @click="jumpToVideoDetail(video)"
                />
              </el-carousel-item>
            </el-carousel>
            <!-- 透明区域 -->
            <div class="carousel-info">
              <div class="carousel-top">
                <div
                  class="carousel-top-title"
                  @click="jumpToVideoDetail(recommendedVideos[currentIndex])"
                >
                  {{ recommendedVideos[currentIndex].title }}
                </div>
                <div class="change-btn">
                  <img
                    @click="prevVideo"
                    style="width: 25px; height: 25px; cursor: pointer"
                    src="@/assets/icons/left-circle.svg"
                    alt="上一个"
                    title="上一个"
                  />
                  <img
                    @click="nextVideo"
                    style="width: 25px; height: 25px; cursor: pointer"
                    src="@/assets/icons/right-circle.svg"
                    alt="下一个"
                    title="下一个"
                  />
                </div>
              </div>
              <div class="dtos">
                <div
                  v-for="item in recommendedVideos.length"
                  :key="item"
                  :class="[
                    'dto-item',
                    currentIndex == item - 1 ? 'active' : '',
                  ]"
                  @click="setCarousel(item)"
                  :title="`切换到第${item}个视频`"
                ></div>
              </div>
            </div>
          </div>

          <!-- 右侧视频列表 -->
          <div class="recommend-right">
            <div class="top-row">
              <div
                class="video-item"
                v-for="video in recommendVideos.slice(0, 3)"
                :key="video.id"
                @click="jumpToVideoDetail(video)"
              >
                <div class="thumbnail-container">
                  <img :src="video.thumbnail" class="thumbnail" alt="" />
                  <div class="video-stats">
                    <div class="stat-item">
                      <img src="@/assets/icons/播放.svg" alt="" />
                      {{ formatCount(video.viewCount) }}
                    </div>
                    <div class="stat-item">
                      <img src="@/assets/icons/弹幕.svg" alt="" />
                      {{ formatCount(video.danmuCount) }}
                    </div>
                  </div>
                  <div class="video-duration">
                    {{ formatDuration(video.duration || 0) }}
                  </div>
                </div>
                <div class="video-details">
                  <span class="video-title">{{ video.title }}</span>
                  <div class="up-info">
                    <img
                      src="@/assets/icons/UP主_32.svg"
                      alt="UP主头像"
                      class="up-avatar"
                    />
                    <span class="up-name">{{ video.author }}</span>
                    <span class="up-name">·</span>
                    <span class="video-time">{{ video.createTime }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom-row">
              <div
                class="video-item"
                v-for="video in recommendVideos.slice(3, 6)"
                :key="video.id"
                @click="jumpToVideoDetail(video)"
              >
                <div class="thumbnail-container">
                  <img :src="video.thumbnail" class="thumbnail" alt="" />
                  <div class="video-stats">
                    <div class="stat-item">
                      <img src="@/assets/icons/播放.svg" alt="" />
                      {{ formatCount(video.viewCount) }}
                    </div>
                    <div class="stat-item">
                      <img src="@/assets/icons/弹幕.svg" alt="" />
                      {{ formatCount(video.danmuCount) }}
                    </div>
                  </div>
                  <div class="video-duration">
                    {{ formatDuration(video.duration || 0) }}
                  </div>
                </div>
                <div class="video-details">
                  <span class="video-title">{{ video.title }}</span>
                  <div class="up-info">
                    <img
                      src="@/assets/icons/UP主_32.svg"
                      alt="UP主头像"
                      class="up-avatar"
                    />
                    <span class="up-name">{{ video.author }}</span>
                    <span class="up-name">·</span>
                    <span class="video-time">{{ video.createTime }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 季节主题 -->
      <div class="season-theme">
        <div class="theme-header">
          <div class="theme-icon"></div>
          <h3>精彩内容</h3>
        </div>

        <!-- 视频列表 -->
        <VideoList :videos="[]" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入所需资源
import { ref } from 'vue'
import VideoList from '@/views/front/videoList/VideoList.vue'

// 导入图片资源
import banner1 from '@/assets/anime/images/banner1.png'
import banner2 from '@/assets/anime/images/banner2.png'
import banner3 from '@/assets/anime/images/banner3.png'
import banner4 from '@/assets/anime/images/banner4.png'
import banner5 from '@/assets/anime/images/banner5.png'
import banner6 from '@/assets/anime/images/banner6.png'
import banner7 from '@/assets/anime/images/banner7.png'
import banner8 from '@/assets/anime/images/banner8.png'
import banner9 from '@/assets/anime/images/banner9.png'
import banner13 from '@/assets/anime/images/banner13.png'

// 定义假数据
const infiniteId = ref(1)
const jumpToVideoDetail = (video: any) => {
  const url = `/video/detail/${video.id}`
  window.open(url, '_blank')
}

// 格式化数字（例如：1.2万）
const formatCount = (count: number): string => {
  if (!count && count !== 0) return '-'
  if (count === 0) return '-'

  if (count < 10000) {
    return count.toString()
  } else if (count < 100000000) {
    return (count / 10000).toFixed(1) + '万'
  } else {
    return (count / 100000000).toFixed(1) + '亿'
  }
}

// 格式化视频时长（例如：05:30）
const formatDuration = (seconds: number): string => {
  if (!seconds) return '00:00'

  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = Math.floor(seconds % 60)

  const formattedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`
  const formattedSeconds =
    remainingSeconds < 10 ? `0${remainingSeconds}` : `${remainingSeconds}`

  return `${formattedMinutes}:${formattedSeconds}`
}

// 定义左侧频道的数据
const rightChannels = ref([
  {
    id: 'anime',
    name: '动画',
    show: false,
    subChannels: [
      {
        id: 'anime/serial',
        name: '日本动画',
      },
      {
        id: 'anime/finish',
        name: '国产动画',
      },
      {
        id: 'anime/news',
        name: '动画资讯',
      },
    ],
  },
  {
    id: 'manga',
    name: '漫画',
    show: false,
    subChannels: [
      {
        id: 'manga/serial',
        name: '连载漫画',
      },
      {
        id: 'manga/finish',
        name: '完结漫画',
      },
      {
        id: 'manga/news',
        name: '漫画资讯',
      },
    ],
  },
  {
    id: 'novel',
    name: '轻小说',
    show: false,
    subChannels: [
      {
        id: 'novel/serial',
        name: '连载小说',
      },
      {
        id: 'novel/finish',
        name: '完结小说',
      },
      {
        id: 'novel/news',
        name: '小说资讯',
      },
    ],
  },
  {
    id: 'cosplay',
    name: 'Cosplay',
    show: false,
    subChannels: [
      {
        id: 'cosplay/anime',
        name: '动漫角色',
      },
      {
        id: 'cosplay/game',
        name: '游戏角色',
      },
      {
        id: 'cosplay/event',
        name: '展会活动',
      },
    ],
  },
  {
    id: 'figure',
    name: '手办',
    show: false,
    subChannels: [
      {
        id: 'figure/new',
        name: '新品发售',
      },
      {
        id: 'figure/review',
        name: '手办评测',
      },
      {
        id: 'figure/collection',
        name: '收藏分享',
      },
    ],
  },
  {
    id: 'game',
    name: '游戏',
    show: false,
    subChannels: [
      {
        id: 'game/mobile',
        name: '手机游戏',
      },
      {
        id: 'game/pc',
        name: 'PC游戏',
      },
      {
        id: 'game/console',
        name: '主机游戏',
      },
    ],
  },
  {
    id: 'music',
    name: '音乐',
    show: false,
    subChannels: [
      {
        id: 'music/vocal',
        name: '动漫歌曲',
      },
      {
        id: 'music/bgm',
        name: '动漫BGM',
      },
      {
        id: 'music/concert',
        name: '演唱会',
      },
    ],
  },
  {
    id: 'seiyuu',
    name: '声优',
    show: false,
    subChannels: [
      {
        id: 'seiyuu/interview',
        name: '声优访谈',
      },
      {
        id: 'seiyuu/radio',
        name: '声优广播',
      },
      {
        id: 'seiyuu/event',
        name: '声优活动',
      },
    ],
  },
  {
    id: 'amv',
    name: 'AMV',
    show: false,
    subChannels: [
      {
        id: 'amv/original',
        name: '原创作品',
      },
      {
        id: 'amv/mad',
        name: 'MAD',
      },
      {
        id: 'amv/mmv',
        name: 'MMV',
      },
    ],
  },
  {
    id: 'vocaloid',
    name: 'VOCALOID',
    show: false,
    subChannels: [
      {
        id: 'vocaloid/original',
        name: '原创曲',
      },
      {
        id: 'vocaloid/cover',
        name: '翻唱',
      },
      {
        id: 'vocaloid/dance',
        name: 'MMD',
      },
    ],
  },
  {
    id: 'art',
    name: '绘画',
    show: false,
    subChannels: [
      {
        id: 'art/original',
        name: '原创作品',
      },
      {
        id: 'art/tutorial',
        name: '绘画教程',
      },
      {
        id: 'art/process',
        name: '创作过程',
      },
    ],
  },
  {
    id: 'jp',
    name: '日本文化',
    show: false,
    subChannels: [
      {
        id: 'jp/travel',
        name: '旅游攻略',
      },
      {
        id: 'jp/food',
        name: '美食探索',
      },
      {
        id: 'jp/life',
        name: '日常生活',
      },
    ],
  },
])

const elCarouselRef = ref()

const jumpToParentChannel = (channel: any) => {
  const url = `/category/${channel.id}`
  window.open(url, '_blank')
}

const setCarousel = (index: number) => {
  elCarouselRef.value.setActiveItem(index - 1)
}

// 轮播图数据
const recommendedVideos = ref([
  {
    id: 1,
    thumbnail: banner1,
    title: '《进击的巨人》最终季完结篇现已上线，艾伦的结局震撼人心',
    duration: 360,
  },
  {
    id: 2,
    thumbnail: banner5,
    title: '《间谍过家家》第二季揭秘安雅的超能力来源与洛伊德的黑暗过去',
    duration: 480,
  },
  {
    id: 3,
    thumbnail: banner9,
    title: '《鬼灭之刃》锻刀村篇先行预告，炭治郎将面临终极试炼',
    duration: 540,
  },
  {
    id: 4,
    thumbnail: banner13,
    title: '《铃芽之旅》新海诚导演最新力作全网独家解析与幕后故事',
    duration: 420,
  },
])

// 当前推荐视频的索引
const currentIndex = ref(0)
const carouselChange = (index: number) => {
  currentIndex.value = index
}

// 切换到上一个视频
const prevVideo = () => {
  elCarouselRef.value.prev()
}

// 切换到下一个视频
const nextVideo = () => {
  elCarouselRef.value.next()
}

// 右侧推荐视频数据
const recommendVideos = ref([
  {
    id: 101,
    title: '《咒术回战》渋谷事变篇完整剧情解析，五条悟的命运与宿傩的真正计划',
    thumbnail: banner2,
    createTime: '2023-12-16',
    danmuCount: 12800,
    viewCount: 256000,
    author: '动漫研究社',
    duration: 1260,
  },
  {
    id: 102,
    title: '从零开始学习日语，一个月掌握基础五十音图与常用语的秘诀',
    thumbnail: banner3,
    createTime: '2023-12-17',
    danmuCount: 8500,
    viewCount: 198000,
    author: '日语学习君',
    duration: 960,
  },
  {
    id: 103,
    title: '2024年春季新番导视，十部不容错过的顶级动画推荐',
    thumbnail: banner4,
    createTime: '2023-12-18',
    danmuCount: 9200,
    viewCount: 210000,
    author: '新番情报局',
    duration: 840,
  },
  {
    id: 104,
    title: '《海贼王》最终篇剧情预测：路飞找到One Piece后的震撼真相',
    thumbnail: banner6,
    createTime: '2023-12-19',
    danmuCount: 7600,
    viewCount: 185000,
    author: '路飞后援会',
    duration: 1080,
  },
  {
    id: 105,
    title: '超燃AMV：动漫中年度最佳战斗场景混剪，让你热血沸腾',
    thumbnail: banner7,
    createTime: '2023-12-20',
    danmuCount: 15800,
    viewCount: 320000,
    author: 'AMV工作室',
    duration: 720,
  },
  {
    id: 106,
    title: 'Cosplay化妆教程：如何完美还原《崩坏：星穹铁道》姬子角色妆容',
    thumbnail: banner8,
    createTime: '2023-12-21',
    danmuCount: 6800,
    viewCount: 168000,
    author: 'Cos妆娘',
    duration: 1500,
  },
])
</script>

<style scoped lang="scss">
.main-page {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding-top: 20px;

  /* 可爱装饰元素 */
  .kawaii-page-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
  }

  .floating-icon {
    position: absolute;
    opacity: 0.6;
    transition: all 0.3s ease;
    animation: float-icon 6s ease-in-out infinite;

    &.icon-1 {
      top: 100px;
      left: -30px;
      width: 60px;
      height: 60px;
      transform: rotate(-15deg);
      animation-delay: 0s;
    }

    &.icon-2 {
      top: 80px;
      right: -25px;
      width: 50px;
      height: 50px;
      transform: rotate(15deg);
      animation-delay: 2s;
    }

    &.icon-3 {
      top: 220px;
      left: -40px;
      width: 70px;
      height: 70px;
      animation-delay: 1s;
    }

    img {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 2px 5px rgba(254, 78, 164, 0.3));
    }

    .kawaii-face {
      width: 100%;
      height: 100%;
      background-color: #ffcbe3;
      border-radius: 50%;
      position: relative;
      box-shadow: 0 2px 10px rgba(254, 78, 164, 0.2);

      &::before,
      &::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        background-color: #333;
        border-radius: 50%;
        top: 25px;
        animation: blink 3s ease-in-out infinite;
      }

      &::before {
        left: 20px;
      }

      &::after {
        right: 20px;
      }

      &::after {
        width: 20px;
        height: 10px;
        background-color: #ff9fcf;
        border-radius: 10px;
        top: 40px;
        left: 25px;
        right: auto;
        animation: none;
      }
    }
  }

  @keyframes float-icon {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }

    50% {
      transform: translateY(-15px) rotate(5deg);
    }
  }

  @keyframes blink {
    0%,
    45%,
    50%,
    100% {
      transform: scaleY(1);
    }

    48% {
      transform: scaleY(0.1);
    }
  }

  /* 动漫主题标语 */
  .anime-slogan {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    h2 {
      color: #fe4ea4;
      font-size: 24px;
      margin: 0 15px;
      position: relative;
      text-shadow: 0 2px 4px rgba(254, 78, 164, 0.2);
      font-weight: bold;
      letter-spacing: 2px;
    }

    .slogan-decoration {
      height: 3px;
      width: 80px;
      background: linear-gradient(45deg, #fe4ea4, #ffcbe3);
      position: relative;

      &::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fe4ea4;
        top: -2.5px;
      }

      &.left::after {
        left: 0;
      }

      &.right::after {
        right: 0;
      }
    }
  }

  /* 季节主题 */
  .season-theme {
    margin-top: 30px;
    margin-bottom: 20px;

    .theme-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .theme-icon {
        width: 24px;
        height: 24px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" fill="%23fe4ea4" /></svg>');
        background-size: contain;
        margin-right: 10px;
      }

      h3 {
        font-size: 20px;
        color: #333;
        margin: 0;
        flex: 1;
      }

      .theme-more {
        font-size: 14px;
        color: #fe4ea4;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          color: #ff9fcf;
          transform: translateX(3px);
        }
      }
    }
  }

  /* 频道导航 */
  &-channel-container {
    display: flex;
    padding: 12px 0;
    margin: 0 auto;
    border-radius: 18px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(254, 78, 164, 0.1);
    margin-bottom: 20px;
    border: 2px solid rgba(254, 78, 164, 0.1);
    position: relative;
    overflow: hidden;

    /* 装饰元素 */
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ffcbe3, rgba(255, 255, 255, 0));
      opacity: 0.3;
      z-index: 0;
    }

    &::before {
      top: -80px;
      left: -50px;
    }

    &::after {
      bottom: -80px;
      right: -50px;
      background: linear-gradient(135deg, #fe4ea4, rgba(255, 255, 255, 0));
    }

    .left-channel {
      display: flex;
      align-items: center;
      margin-left: 15px;
      z-index: 2;

      &-recommend {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        background: linear-gradient(45deg, #fe4ea4, #ff9fcf);
        box-shadow: 0 4px 10px rgba(254, 78, 164, 0.2);

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 6px 15px rgba(254, 78, 164, 0.3);
        }

        img {
          width: 24px;
          height: 24px;
          margin-right: 6px;
          border-radius: 50%;
          border: 2px solid white;
          transition: all 0.3s ease;
        }

        span {
          color: white;
          font-weight: bold;
          font-size: 16px;
          transition: all 0.3s ease;
          letter-spacing: 1px;
        }
      }
    }

    .right-channel {
      flex: 1;
      margin: 0 15px;
      z-index: 2;

      &-left {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .channel-container {
          position: relative;
          margin-right: 10px;

          .right-channel-left-link {
            padding: 8px 16px;
            cursor: pointer;
            position: relative;
            border-radius: 20px;
            font-size: 14px;
            transition: all 0.3s ease;
            color: #7c5479;

            &:hover {
              color: #fe4ea4;
              background-color: rgba(255, 214, 255, 0.3);
            }

            &::after {
              content: '';
              position: absolute;
              bottom: 2px;
              left: 50%;
              width: 0;
              height: 2px;
              background: linear-gradient(to right, #fe4ea4, #ff9fcf);
              transition: all 0.3s ease;
              transform: translateX(-50%);
            }

            &:hover::after {
              width: 70%;
            }
          }
        }
      }
    }
  }

  &-video-container {
    width: 100%;
  }
}

/* 子频道弹出窗 */
.sub-channel-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(254, 78, 164, 0.15);
  border: 2px solid rgba(254, 78, 164, 0.1);

  .sub-channel-left-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-decoration: none;
    border-radius: 12px;
    color: #7c5479;
    font-size: 14px;
    transition: all 0.3s ease;
    text-align: center;

    &:hover {
      background-color: rgba(255, 214, 255, 0.3);
      color: #fe4ea4;
      transform: translateY(-2px);
    }
  }
}

/* 推荐区域 */
.recommend-section {
  margin-bottom: 20px;

  .recommend-content {
    display: flex;
    gap: 20px;
    height: 300px;
  }
}

/* 左侧轮播图 */
.recommend-left {
  width: 440px;
  height: 100%;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(254, 78, 164, 0.15);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(254, 78, 164, 0.2);

    .carousel-info {
      background: rgba(0, 0, 0, 0.6);
    }
  }

  .carousel {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        45deg,
        rgba(254, 78, 164, 0.3),
        rgba(255, 214, 255, 0.1)
      );
      z-index: 1;
      pointer-events: none;
      mix-blend-mode: overlay;
    }

    &-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.5s ease;
      cursor: pointer;

      &:hover {
        transform: scale(1.05);
      }
    }
  }

  .carousel-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    transition: all 0.3s ease;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

    .carousel-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .carousel-top-title {
        flex: 1;
        color: white;
        font-size: 16px;
        font-weight: bold;
        margin-right: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          color: #fe4ea4;
        }
      }

      .change-btn {
        display: flex;
        gap: 10px;

        img {
          transition: all 0.3s ease;
          opacity: 0.8;

          &:hover {
            transform: scale(1.1);
            opacity: 1;
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
          }
        }
      }
    }

    .dtos {
      display: flex;
      gap: 8px;

      .dto-item {
        width: 30px;
        height: 6px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background-color: rgba(255, 255, 255, 0.8);
        }

        &.active {
          background-color: #fe4ea4;
          width: 40px;
        }
      }
    }
  }
}

/* 右侧视频列表 */
.recommend-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;

  .top-row,
  .bottom-row {
    display: flex;
    gap: 15px;
    height: calc(50% - 7.5px);
  }

  .video-item {
    flex: 1;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 5px 15px rgba(254, 78, 164, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(254, 78, 164, 0.2);

      .thumbnail {
        transform: scale(1.1);
      }

      .video-details .video-title {
        color: #fe4ea4;
      }
    }

    .thumbnail-container {
      width: 100%;
      height: 60%;
      position: relative;
      overflow: hidden;
      border-radius: 15px 15px 0 0;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          45deg,
          rgba(254, 78, 164, 0.2),
          rgba(255, 214, 255, 0.1)
        );
        pointer-events: none;
        mix-blend-mode: overlay;
      }

      .thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.4s ease;
      }

      .video-stats {
        position: absolute;
        left: 10px;
        bottom: 10px;
        display: flex;
        gap: 10px;
        z-index: 1;

        .stat-item {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: white;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
          background: rgba(0, 0, 0, 0.3);
          padding: 3px 6px;
          border-radius: 10px;
          backdrop-filter: blur(4px);

          img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
            filter: brightness(10);
          }
        }
      }

      .video-duration {
        position: absolute;
        right: 10px;
        bottom: 10px;
        font-size: 12px;
        color: white;
        background: rgba(0, 0, 0, 0.3);
        padding: 2px 6px;
        border-radius: 10px;
        z-index: 1;
        backdrop-filter: blur(4px);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
      }
    }

    .video-details {
      flex: 1;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .video-title {
        font-size: 14px;
        line-height: 1.4;
        font-weight: 500;
        color: #333;
        margin-bottom: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s ease;
      }

      .up-info {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #777;

        .up-avatar {
          width: 16px;
          height: 16px;
          margin-right: 4px;
          filter: brightness(0.9);
        }

        .up-name {
          margin-right: 5px;
          color: #777;
        }

        .video-time {
          color: #999;
          font-size: 11px;
        }
      }
    }
  }
}
</style>
